<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>2048</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #div1024 {
        width: 600px;
        margin: 50px auto;
        overflow: hidden;
      }
      .main {
        float: left;
        margin-right: 50px;
      }
      li {
        list-style: none;
      }
      .main > li {
        width: 328px;
        overflow: hidden;
      }
      .main > li ul li {
        border: 1px solid #6666ff;
        width: 80px;
        height: 80px;
        border-collapse: collapse;
        text-align: center;
        line-height: 80px;
        font-size: 36px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="div1024">
      <ul class="main">
        <li class="line0">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </li>
        <li class="line1">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </li>
        <li class="line2">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </li>
        <li class="line3">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </li>
      </ul>
      <div style="float: left; margin-top: 120px">
        <div>分数：<span id="score">0</span></div>
        <div>计数：<span id="step">0</span></div>
        <div>玩法：<span id="tips">用方向键操作</span></div>
        <div>提示：<span id="tip"></span></div>
      </div>
    </div>
    <script>
      window.onload = function () {
        var game = {
          // 随机产生的数字
          num: 0,
          //剩余空格
          counts: 0,
          score: 0,
          step: 0,
          //横向数组与纵向数组
          arr: [],
          arr1: [],
          init: function () {
            game.style();
            document.getElementById("tip").innerHTML = "游戏开始啦...";
            this.add();
            this.add();
          },
          add: function () {
            var x = false,
              y = false;
            Math.random() > 0.5 ? (this.num = 2) : (this.num = 4);
            var Lindex = Math.floor(Math.random() * 4),
              Rindex = Math.floor(Math.random() * 4),
              dom = document
                .getElementsByClassName("line" + Lindex)[0]
                .getElementsByTagName("li")[Rindex];
            if (dom.innerHTML == "") {
              dom.className = "style" + this.num;
              dom.innerHTML = this.num;
            } else {
              this.count();
              if (this.counts == 0) {
                //判断横向是否有值相同
                outerloop0: for (var i = 0; i < 4; i++) {
                  for (var j = 0; j < this.arr[i].length - 1; j++) {
                    if (this.arr[i][j] == this.arr[i][j + 1]) {
                      x = true;
                      break outerloop0;
                    }
                  }
                }
                //判断纵向是否有值相同
                outerloop1: for (var i = 0; i < 4; i++) {
                  for (var j = 0; j < this.arr1[i].length - 1; j++) {
                    if (this.arr1[i][j] == this.arr1[i][j + 1]) {
                      y = true;
                      break outerloop1;
                    }
                  }
                }
                if (!x && !y) {
                  alert("gameovar,你的分数是" + this.score);
                } else if (x) {
                  if (
                    arguments[0].keyCode == 37 ||
                    arguments[0].keyCode == 39
                  ) {
                    this.step++;
                  }
                } else if (y) {
                  if (
                    arguments[0].keyCode == 38 ||
                    arguments[0].keyCode == 40
                  ) {
                    this.step++;
                  }
                }
              } else {
                this.add();
              }
            }
          },
          left: function () {
            //数组值合并
            for (var i = 0; i < 4; i++) {
              for (var j = 0; j < this.arr[i].length - 1; j++) {
                if (this.arr[i][j] == this.arr[i][j + 1]) {
                  this.score += this.arr[i][j] * 2;
                  this.arr[i][j] += this.arr[i][j];
                  this.arr[i].splice(j + 1, 1);
                }
              }
            }
            //赋值给dom
            for (var i = 0; i < 4; i++) {
              len = this.arr[i].length;
              for (var m = 0; m < 4; m++) {
                document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[m].className = "";
                document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[m].innerHTML = "";
              }
              for (var j = 0; j < len; j++) {
                document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[j].innerHTML = this.arr[i][j];
                document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[j].className =
                  "style" + this.arr[i][j];
              }
            }
            if (this.counts != 0) this.step++;
          },
          right: function () {
            //数组值合并
            for (var i = 0; i < 4; i++) {
              for (var j = this.arr[i].length - 1; j > 0; j--) {
                if (this.arr[i][j] == this.arr[i][j - 1]) {
                  this.score += this.arr[i][j - 1] * 2;
                  this.arr[i][j] += this.arr[i][j];
                  this.arr[i].splice(j - 1, 1);
                }
              }
            }
            //赋值给dom
            for (var i = 0; i < 4; i++) {
              len = this.arr[i].length;
              for (var m = 0; m < 4; m++) {
                document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[m].className = "";
                document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[m].innerHTML = "";
              }
              for (var j = 0; j < len; j++) {
                document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[3 - j].innerHTML =
                  this.arr[i][len - 1 - j];
                document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[3 - j].className =
                  "style" + this.arr[i][len - 1 - j];
              }
            }
            if (this.counts != 0) this.step++;
            this.log(this.arr);
          },
          up: function () {
            //数组值合并
            for (var i = 0; i < 4; i++) {
              for (var j = 0; j < this.arr1[i].length - 1; j++) {
                if (this.arr1[i][j] == this.arr1[i][j + 1]) {
                  this.score += this.arr1[i][j] * 2;
                  this.arr1[i][j] += this.arr1[i][j];
                  this.arr1[i].splice(j + 1, 1);
                }
              }
            }
            //赋值给dom
            for (var i = 0; i < 4; i++) {
              len = this.arr1[i].length;
              for (var m = 0; m < 4; m++) {
                document
                  .getElementsByClassName("line" + m)[0]
                  .getElementsByTagName("li")[i].className = "";
                document
                  .getElementsByClassName("line" + m)[0]
                  .getElementsByTagName("li")[i].innerHTML = "";
              }
              for (var j = 0; j < len; j++) {
                document
                  .getElementsByClassName("line" + j)[0]
                  .getElementsByTagName("li")[i].innerHTML = this.arr1[i][j];
                document
                  .getElementsByClassName("line" + j)[0]
                  .getElementsByTagName("li")[i].className =
                  "style" + this.arr1[i][j];
              }
            }
            if (this.counts != 0) this.step++;
          },
          down: function () {
            //数组值合并
            for (var i = 0; i < 4; i++) {
              for (var j = this.arr1[i].length - 1; j > 0; j--) {
                if (this.arr1[i][j] == this.arr1[i][j - 1]) {
                  this.score += this.arr1[i][j - 1] * 2;
                  this.arr1[i][j] += this.arr1[i][j];
                  this.arr1[i].splice(j - 1, 1);
                }
              }
            }
            //赋值给dom
            for (var i = 0; i < 4; i++) {
              len = this.arr1[i].length;
              for (var m = 0; m < 4; m++) {
                document
                  .getElementsByClassName("line" + m)[0]
                  .getElementsByTagName("li")[i].className = "";
                document
                  .getElementsByClassName("line" + m)[0]
                  .getElementsByTagName("li")[i].innerHTML = "";
              }
              for (var j = 0; j < len; j++) {
                document
                  .getElementsByClassName("line" + (4 - len + j))[0]
                  .getElementsByTagName("li")[i].innerHTML = this.arr1[i][j];
                document
                  .getElementsByClassName("line" + (4 - len + j))[0]
                  .getElementsByTagName("li")[i].className =
                  "style" + this.arr1[i][j];
              }
            }
            if (this.counts != 0) this.step++;
          },
          count: function () {
            var inner,
              inner1,
              m = 0,
              n = 0;
            this.counts = 0;
            //横向数组，用于左右操作
            for (var i = 0; i < 4; i++) {
              this.arr[i] = [];
              m = 0;
              for (var j = 0; j < 4; j++) {
                inner = document
                  .getElementsByClassName("line" + i)[0]
                  .getElementsByTagName("li")[j].innerHTML;
                if (inner) {
                  this.arr[i][m] = Number(inner);
                  m++;
                } else {
                  this.counts++;
                }
              }
            }
            this.log(this.arr);
            //纵向数组用于上下操作
            for (var x = 0; x < 4; x++) {
              this.arr1[x] = [];
            }
            for (var x = 0; x < 4; x++) {
              n = 0;
              for (var y = 0; y < 4; y++) {
                inner1 = document
                  .getElementsByClassName("line" + y)[0]
                  .getElementsByTagName("li")[x].innerHTML;
                if (inner1) {
                  this.arr1[x][n] = Number(inner1);
                  n++;
                }
              }
            }
          },
          log: function (x) {
            console.log(x);
          },
          update: function () {
            document.getElementById("score").innerHTML = this.score;
            document.getElementById("step").innerHTML = this.step;
            var tip = document.getElementById("tip");
            var max = this.arr.toString().split(",");
            function sort(a, b) {
              return a - b;
            }
            max = max.sort(sort)[max.length - 1];
            if (max == 512) {
              tip.innerHTML = "加油加油...";
            }
            if (max == 1024) {
              tip.innerHTML = "唉哟，不错喔...";
            }
            if (max == 2048) {
              tip.innerHTML = "恭喜你成功了，太厉害了...";
            }
            if (max == 4096) {
              tip.innerHTML = "超神了...";
            }
            if (max == 8192) {
              tip.innerHTML = "XX，出现bug了...";
            }
          },
          style: function () {
            var values = [
                2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192,
              ],
              add = 0.075,
              styles = "";
            for (var i = 0; i < values.length; i++) {
              styles +=
                ".style" +
                values[i] +
                "{background-color:hsla(360,50%,50%," +
                add +
                ");}\r\n";
              add += 0.075;
            }
            document.getElementsByTagName("style")[0].innerHTML += styles;
          },
        };
        game.init();
        document.onkeydown = function (e) {
          game.count();
          e = e || window.event;
          switch (e.keyCode) {
            case 37:
              game.left();
              game.add(e);
              game.update();
              break;
            case 38:
              game.up();
              game.add(e);
              game.update();
              break;
            case 39:
              game.right();
              game.add(e);
              game.update();
              break;
            case 40:
              game.down();
              game.add(e);
              game.update();
              break;
            default:
              break;
          }
        };
      };
    </script>
  </body>
</html>
